<template>
    <el-card class="box-card">

        <el-dialog :title="modalType == 0 ? '商品出库' : '更新商品'" :visible.sync="dialogVisible" width="30%"
            :before-close="handleClose">

            <!-- 用户表单信息 -->
            <el-form :rules="rules" ref="addUserForm" :model="form" label-width="80px">
                <el-form-item label="商品名称" prop="goodsName">
                    <el-input placeholder="请输入商品名称" v-model="form.goodsName"></el-input>
                </el-form-item>
                <el-form-item label="入库数量" prop="outStockNum">
                    <el-input placeholder="请输入出库数量" v-model="form.outStockNum"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="submitCancel">取 消</el-button>
                <el-button type="primary" @click="submitAddStockOut">确 定</el-button>
            </span>
        </el-dialog>

        <div class="manage-header">
            <el-button @click="dialogVisible = true" type="primary">+ 商品出库</el-button>
            <!-- 搜索区域 -->
            <el-form :inline="true">
                <el-form-item>
                    <el-input placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="common-tabel">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column fixed prop="orderId" label="订单编号" width="180">
                </el-table-column>
                <el-table-column prop="goodsName" label="商品名称" width="180">
                </el-table-column>
                <el-table-column prop="price" label="总价（元）" width="180">
                    <template slot-scope="scope">
                        {{ scope.row.price * scope.row.quantity }}
                    </template>
                </el-table-column>
                <el-table-column prop="quantity" label="购买数量" width="180">
                </el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" width="180">
                    <template slot-scope="scope">
                        <!-- 插入 el-tag -->
                        <el-tag :effect="scope.row.orderStatus === 1 ? 'dark' : 'plain'">{{scope.row.orderStatus === 1 ? '已支付' : '未支付' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">更新</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pager">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageInfo.currentPage" :page-sizes="[5, 10]" :page-size="pageInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                </el-pagination>
            </div>
        </div>
    </el-card>
</template>

<script>
import { getAllOrderRequest } from '@/api/order'

export default {
    name: 'Order',
    data() {
        return {
            dialogVisible: false,
            form: {
                goodsName: '',
                outStockNum: ''
            },
            rules: {
                goodsName: [
                    { required: true, message: "请输入商品名称" }
                ],
                outStockNum: [
                    { required: true, message: "请输入出库数量" }
                ],
            },
            options: [{
                value: '',
                label: ''
            }],
            tableData: [],
            modalType: 0,  // 0表示新增的弹窗，1表示更新的弹窗
            //  分页数据
            pageInfo: {
                currentPage: 1,  //  当前页数
                pageSize: 5,  //  页面显示数量
                total: 0  //  总条目数
            }
        };
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        //  获取所有生产商信息
        getAllOrder() {
            getAllOrderRequest(this.pageInfo.currentPage, this.pageInfo.pageSize).then((res) => {
                if (res.data.code === 20041) {
                    this.tableData = res.data.data.data
                    this.pageInfo.total = res.data.data.total
                }
            }).catch(() => {
                this.errorMsg('商品信息重新获取中')
            })
        },
        submitCancel() {
            this.form = {}
            this.dialogVisible = false
        },
        //  添加 / 更新商品库存信息
        submitAddStockOut() {
            if (this.modalType === 0) {
                addStockOutRequest(this.form).then((res) => {
                    if (res.data.code === 20011) {
                        this.successMsg(res.data.data)
                        this.dialogVisible = false
                        this.form = {}
                    }
                    else {
                        this.errorMsg(res.data.data)
                        this.dialogVisible = true
                    }
                }).catch(() => { })
                    .finally(() => {
                        this.getAllStockOut();
                    })
            }else{
                updateStockRequest(this.form).then((res) => {
                    if(res.data.code === 20031){
                        this.successMsg(res.data.data)
                        this.getAllStock()
                        this.form = {}
                        this.dialogVisible = false
                        this.modalType = 0
                    }else{
                        this.errorMsg(res.data.data)
                        this.dialogVisible = true
                    }
                }).catch(() => {})
                .finally(() => {})
            }
        },
        onSubmit() { },
        //  根据id查询出库存信息并回显到表单
        handleEdit(val) {
            this.modalType = 1
            this.dialogVisible = true
            getStockByIdRequest(val.stockId).then((res) => {
                if (res.data.code === 20041) {
                    this.form = res.data.data
                } else {
                    this.errorMsg(res.data.data)
                }
            }).catch(() => { })
                .finally(() => { })
        },
        handleDelete(val) {
            this.$confirm('确认删除【' + val.goodsName + "】的库存信息吗？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //  发送删除商品信息请求
                deleteStockByIdRequest(val.stockId).then((res) => {
                    if (res.data.code === 20021) {
                        this.successMsg(res.data.data)
                        this.getAllStock()
                    } else {
                        this.errorMsg(res.data.data)
                    }
                }).catch(() => { })
                    .finally(() => {
                        this.getAllStock()
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //  页面显示数量发生改变事件
        handleSizeChange(val) {
            // console.log('页面显示数量',val)
            this.pageInfo.pageSize = val
            this.getAllOrder()
        },
        //  页码发生改变事件
        handleCurrentChange(val) {
            // console.log('页码', val)
            this.pageInfo.currentPage = val
            this.getAllOrder()
        },
        //  成功消息
        successMsg(msg) {
            this.$message({
                message: msg,
                type: 'success'
            });
        },
        //  错误消息
        errorMsg(msg) {
            this.$message({
                message: msg,
                type: 'warning'
            });
        }
    },
    mounted() {
        this.getAllOrder()
    },
    created() {


    }
}
</script>

<style lang="less" scoped>
.box-card {
    height: 90%;


    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .manage-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .common-tabel {
        position: relative;
        height: (calc(100% - 62px));

        img {
            width: 60px;
            height: 60px;
        }

        // .pager {
        //     position: absolute;
        //     bottom: 0;
        //     right: 20px;
        // }
    }
}
</style>